<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>健身房管理</h2>
      </el-col>
    </el-row>
<!--    <el-divider />-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :sm="24" :lg="12" style="padding-left: 20px">-->
<!--        <div id="t1"  class="text item" :style="{width: '600px', height: '300px'}" />-->
<!--      </el-col>-->
<!--      <el-col :sm="24" :lg="12" style="padding-left: 20px">-->
<!--        <div id="t2"  class="text item" :style="{width: '600px', height: '300px'}" />-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <el-divider />-->
  </div>
</template>

<script>
import echarts from 'echarts'
import { getStudentNumber } from '@/api/gym/studentAssignment'
import {getCharts} from '@/api/operation/commodity'
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.1",
    };
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    initCharts() {
      getCharts().then(response => {
        var myChart = echarts.init(document.getElementById("t2"))
        // 绘制图表
        myChart.setOption({
          title: {
            text: "商品统计",
          },
          xAxis: {
            type: 'category',
            data: response.c
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: response.d,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        })
      })
      getStudentNumber().then(response => {
        console.log(response.a);
        console.log(response.b);
        var myChart = echarts.init(document.getElementById("t1"))
        // 绘制图表
        myChart.setOption({
          title: {
            text: "私教学生统计",
          },
          xAxis: {
            type: 'category',
            data: response.a
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: response.b,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        })
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

